<template>
  <s-layout title="民宿详情" navbar="normal" :navbarStyle="{ color: '#333' }">
    <view class="detail-container">
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>

      <view v-else-if="error" class="error-container">
        <text class="error-text">{{ error }}</text>
        <view class="retry-btn" @tap="loadDetail">
          <text>重试</text>
        </view>
      </view>

      <view v-else-if="!homestay" class="empty-container">
        <text class="empty-text">民宿不存在</text>
      </view>

      <view v-else class="detail-content">
        <view class="hero-section">
          <image
            v-if="homestay.image"
            :src="homestay.image"
            mode="aspectFill"
            class="hero-image"
          />
          <view v-else class="hero-placeholder">
            <text class="placeholder-emoji">🏠</text>
          </view>
          <view class="price-badge">
            <text class="price-text"
              >¥{{
                isVipUser && homestay.price2 ? homestay.price2 : homestay.price
              }}/晚</text
            >
            <text class="user-type" v-if="isVipUser">VIP会员价</text>
            <text
              class="original-price"
              v-if="
                isVipUser && homestay.price2 && homestay.price2 < homestay.price
              "
              >原价: ¥{{ homestay.price }}</text
            >
          </view>
        </view>

        <view class="content-section">
          <view class="title-section">
            <view class="title-header ss-flex ss-row-between ss-col-start">
              <view class="title-content">
                <text class="main-title">{{ homestay.name }}</text>
                <text class="alias-name" v-if="homestay.aliasName">{{
                  homestay.aliasName
                }}</text>
                <text class="address">📍 {{ homestay.fullAddress }}</text>
              </view>
              <view
                class="follow-btn"
                :class="{ followed: homestay.followed === 1 }"
                @tap="toggleFollow"
              >
                <text class="follow-icon">{{
                  homestay.followed === 1 ? "❤️" : "🤍"
                }}</text>
                <text class="follow-text">{{
                  homestay.followed === 1 ? "已关注" : "关注"
                }}</text>
              </view>
            </view>
          </view>

          <view class="basic-info">
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">户型</text>
                <text class="info-value">{{ homestay.layout || "未知" }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">面积</text>
                <text class="info-value">{{ homestay.area || "未知" }}㎡</text>
              </view>
            </view>
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">楼层</text>
                <text class="info-value">{{ homestay.floors || "未知" }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">状态</text>
                <text
                  class="info-value"
                  :class="{ 'status-active': homestay.state === 1 }"
                >
                  {{ homestay.state === 1 ? "可预订" : "暂停服务" }}
                </text>
              </view>
            </view>
          </view>

          <view class="devices-section" v-if="homestay.devices">
            <text class="section-title">设施设备</text>
            <view class="devices-list">
              <view
                class="device-tag"
                v-for="device in deviceList"
                :key="device"
              >
                <text>{{ device }}</text>
              </view>
            </view>
          </view>

          <view class="calendar-section">
            <text class="section-title">选择入住日期</text>

            <view class="date-selection" @tap="showCalendarSection">
              <view class="date-display">
                <view class="date-item">
                  <text class="date-label">入住日期</text>
                  <text class="date-value">{{ selectedDatesDisplay || "请选择" }}</text>
                </view>
              </view>
              <view class="date-arrow">
                <text>📅</text>
              </view>
            </view>

            <view class="price-info" v-if="selectedDates.length > 0 && totalPrice > 0">
              <view class="price-display">
                <text class="price-text">共{{ selectedDates.length }}晚，总价格: ¥{{ totalPrice }}</text>
              </view>
              <view class="selected-dates-list">
                <view
                  class="selected-date-item"
                  v-for="(date, index) in selectedDates"
                  :key="date"
                >
                  <text class="date-item-text">{{ date }} (¥{{ getDatePrice(date) }})</text>
                  <text class="remove-date" @tap="removeDate(index)">×</text>
                </view>
              </view>
            </view>
          </view>

          <view class="note-section">
            <text class="section-title">预订备注</text>
            <view class="note-input-wrapper">
              <textarea
                class="note-input"
                v-model="orderNote"
                placeholder="请输入特殊需求或备注信息（选填）"
                maxlength="200"
                :show-confirm-bar="false"
              />
              <view class="note-count">
                <text class="count-text">{{ orderNote.length }}/200</text>
              </view>
            </view>
          </view>

          <view class="contact-section">
            <text class="section-title">联系方式</text>
            <view class="contact-item" v-if="homestay.contact">
              <text class="contact-label">联系人:</text>
              <text class="contact-value">{{ homestay.contact }}</text>
            </view>
            <view class="contact-item" v-if="homestay.telephone">
              <text class="contact-label">电话:</text>
              <text
                class="contact-value phone"
                @tap="callPhone(homestay.telephone)"
                >{{ homestay.telephone }}</text
              >
            </view>
          </view>

          <view class="content-detail" v-if="homestay.content">
            <text class="section-title">详细介绍</text>
            <rich-text
              class="rich-content"
              :nodes="homestay.content"
            ></rich-text>
          </view>
        </view>

        <view class="bottom-actions">
          <view
            class="action-btn secondary"
            @tap="callPhone(homestay.telephone)"
          >
            <text>电话咨询</text>
          </view>
          <view class="action-btn primary" @tap="showBooking">
            <text>立即预订</text>
          </view>
        </view>
      </view>
    </view>

    <view v-if="showCalendarView" class="calendar-popup" @tap="handlePopupTap">
      <view class="calendar-container" @tap.stop>
        <view class="calendar-header">
          <text class="calendar-title">选择入住日期 (可多选)</text>
          <view class="close-btn" @tap="hideCalendarSection">
            <text>✕</text>
          </view>
        </view>
        
        <view class="selected-count" v-if="tempSelectedDates.length > 0">
          <text class="count-text">已选择 {{ tempSelectedDates.length }} 天</text>
          <text class="clear-all" @tap="clearAllDates">清空</text>
        </view>
        
        <view class="calendar-content">
          <view class="calendar-month-header">
            <view class="month-nav" @tap="prevMonth">
              <text>‹</text>
            </view>
            <text class="month-title">{{ currentMonth }}</text>
            <view class="month-nav" @tap="nextMonth">
              <text>›</text>
            </view>
          </view>
          
          <view class="calendar-weekdays">
            <text class="weekday" v-for="day in weekdays" :key="day">{{ day }}</text>
          </view>
          
          <view class="calendar-days">
            <view 
              class="calendar-day" 
              v-for="day in calendarDays" 
              :key="day.key"
              :class="day.class"
              @tap="selectDate(day)"
            >
              <text class="day-text">{{ day.text }}</text>
              <text class="day-price" v-if="day.price">¥{{ day.price }}</text>
            </view>
          </view>
        </view>
        
        <view class="calendar-actions">
          <button class="action-btn cancel" @tap="hideCalendarSection">取消</button>
          <button class="action-btn confirm" @tap="confirmDateSelection">确认选择</button>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from "vue";
import sheep from "@/sheep";

const loading = ref(false);
const error = ref("");
const homestay = ref(null);
const priceCalendar = ref({});
const bookedCalendar = ref({});
const selectedDates = ref([]);
const totalPrice = ref(0);
const orderNote = ref("");
const showCalendarView = ref(false);
const tempSelectedDates = ref([]);
const currentDate = ref(new Date());

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

const weekdays = ["日", "一", "二", "三", "四", "五", "六"];

const deviceList = computed(() => {
  if (!homestay.value || !homestay.value.devices) return [];
  return homestay.value.devices.split("，").filter((device) => device.trim());
});

const currentMonth = computed(() => {
  const year = currentDate.value.getFullYear();
  const month = currentDate.value.getMonth() + 1;
  return `${year}年${month}月`;
});

// 显示选中日期的文本
const selectedDatesDisplay = computed(() => {
  if (selectedDates.value.length === 0) return "";
  if (selectedDates.value.length === 1) return selectedDates.value[0];
  const sortedDates = [...selectedDates.value].sort();
  return `${sortedDates[0]} 等 ${selectedDates.value.length} 天`;
});

const calendarDays = computed(() => {
  const year = currentDate.value.getFullYear();
  const month = currentDate.value.getMonth();
  
  // 获取当月第一天和最后一天
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const firstDayWeek = firstDay.getDay();
  const today = new Date();
  
  const days = [];
  
  // 添加上个月的日期（填充空白）
  for (let i = firstDayWeek - 1; i >= 0; i--) {
    const date = new Date(year, month, -i);
    days.push({
      key: `prev-${date.getDate()}`,
      text: date.getDate(),
      class: 'prev-month',
      date: null,
      price: null
    });
  }
  
  // 添加当月的日期
  for (let day = 1; day <= lastDay.getDate(); day++) {
    const date = new Date(year, month, day);
    const dateStr = formatDate(date);
    const isPast = date < today;
    const isToday = date.toDateString() === today.toDateString();
    const isSelected = tempSelectedDates.value.includes(dateStr);
    const isBooked = bookedCalendar.value[dateStr];
    const price = getDatePrice(dateStr);
    
    let dayClass = 'current-month';
    if (isPast) dayClass += ' past';
    if (isToday) dayClass += ' today';
    if (isSelected) dayClass += ' selected';
    if (isBooked) dayClass += ' booked';
    if (!isPast && !isBooked) dayClass += ' available';
    
    days.push({
      key: dateStr,
      text: day,
      class: dayClass,
      date: dateStr,
      price: price > 0 ? price : null,
      disabled: isPast || isBooked
    });
  }
  
  // 添加下个月的日期（填充空白）
  const remainingDays = 42 - days.length; // 6周 * 7天
  for (let day = 1; day <= remainingDays; day++) {
    const date = new Date(year, month + 1, day);
    days.push({
      key: `next-${day}`,
      text: day,
      class: 'next-month',
      date: null,
      price: null
    });
  }
  
  return days;
});

const isVipUser = computed(() => {
  try {
    const userStore = uni.getStorageSync("user-store");
    if (userStore && typeof userStore === "object") {
      return userStore.userInfo && userStore.userInfo.level > 0;
    }
    if (userStore && typeof userStore === "string") {
      const parsed = JSON.parse(userStore);
      return parsed.userInfo && parsed.userInfo.level > 0;
    }
  } catch (error) {
    return false;
  }
  return false;
});

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const getDatePrice = (dateStr) => {
  if (priceCalendar.value[dateStr] && priceCalendar.value[dateStr] > 0) {
    return priceCalendar.value[dateStr];
  }

  if (homestay.value) {
    if (isVipUser.value && homestay.value.price2) {
      return homestay.value.price2;
    }
    return homestay.value.price || 0;
  }

  return 0;
};

const calculateTotalPrice = () => {
  let total = 0;
  selectedDates.value.forEach(date => {
    total += getDatePrice(date);
  });
  totalPrice.value = total;
};

const loadDetail = async () => {
  try {
    loading.value = true;
    error.value = "";

    const res = await sheep.$api.noAuth.getHomeDetail("4", props.id);

    if (res && res.homestay) {
      homestay.value = {
        ...res.homestay,
        image: getFirstValidImage(res.homestay.pics),
        fullAddress: `${res.homestay.province || ""}${res.homestay.city || ""}${
          res.homestay.district || ""
        }${res.homestay.address || ""}`,
      };

      if (
        res.calendar &&
        Array.isArray(res.calendar) &&
        res.calendar.length >= 2
      ) {
        priceCalendar.value = res.calendar[0] || {};
        bookedCalendar.value = res.calendar[1] || {};
      }
    } else {
      homestay.value = null;
    }
  } catch (err) {
    error.value = "加载失败，请稍后重试";
    homestay.value = null;
  } finally {
    loading.value = false;
  }
};

const getFirstValidImage = (pics) => {
  if (!pics || pics === "null" || pics === "" || pics === "undefined")
    return null;
  const picArray = pics
    .split(",")
    .filter(
      (pic) => pic && pic !== "null" && pic.trim() !== "" && pic !== "undefined"
    );
  return picArray.length > 0 ? picArray[0].trim() : null;
};

const showCalendarSection = () => {
  // 初始化临时选中的日期
  tempSelectedDates.value = [...selectedDates.value];
  showCalendarView.value = true;
};

const hideCalendarSection = () => {
  showCalendarView.value = false;
  tempSelectedDates.value = [];
};

const handlePopupTap = () => {
  // 点击遮罩层关闭弹窗
  hideCalendarSection();
};

const prevMonth = () => {
  const newDate = new Date(currentDate.value);
  newDate.setMonth(newDate.getMonth() - 1);
  currentDate.value = newDate;
};

const nextMonth = () => {
  const newDate = new Date(currentDate.value);
  newDate.setMonth(newDate.getMonth() + 1);
  currentDate.value = newDate;
};

const selectDate = (day) => {
  if (day.disabled || !day.date) return;
  
  if (bookedCalendar.value[day.date]) {
    uni.showToast({
      title: "该日期已被预订",
      icon: "none",
      duration: 1500
    });
    return;
  }
  
  const index = tempSelectedDates.value.indexOf(day.date);
  if (index > -1) {
    tempSelectedDates.value.splice(index, 1);
  } else {
    tempSelectedDates.value.push(day.date);
  }
};

const clearAllDates = () => {
  tempSelectedDates.value = [];
};

const confirmDateSelection = () => {
  if (tempSelectedDates.value.length === 0) {
    uni.showToast({
      title: "请选择入住日期",
      icon: "none",
    });
    return;
  }
  
  const sortedDates = [...tempSelectedDates.value].sort();
  selectedDates.value = sortedDates;
  calculateTotalPrice();
  showCalendarView.value = false;
  tempSelectedDates.value = [];
  
  uni.showToast({
    title: `已选择 ${selectedDates.value.length} 天`,
    icon: "success",
    duration: 1500
  });
};

const removeDate = (index) => {
  selectedDates.value.splice(index, 1);
  calculateTotalPrice();
};

const callPhone = (phone) => {
  if (!phone) return;
  uni.makePhoneCall({
    phoneNumber: phone,
  });
};

const toggleFollow = async () => {
  if (!homestay.value || !homestay.value.id) return;

  try {
    if (homestay.value.followed === 1) {
      await sheep.$api.noAuth.unfollowContent({
        type: 4,
        dataId: homestay.value.id,
      });
    } else {
      await sheep.$api.noAuth.followContent({
        type: 4,
        dataId: homestay.value.id,
      });
    }
    homestay.value.followed = homestay.value.followed === 1 ? 0 : 1;
  } catch (error) {
    sheep.$helper.toast("操作失败，请稍后重试");
  }
};

const showBooking = () => {
  if (selectedDates.value.length === 0) {
    uni.showToast({
      title: "请先选择入住日期",
      icon: "none",
    });
    return;
  }

  if (totalPrice.value <= 0) {
    uni.showToast({
      title: "价格计算错误",
      icon: "none",
    });
    return;
  }

  const sortedDates = [...selectedDates.value].sort();
  let content = `入住日期: ${sortedDates.join(', ')}\n共 ${selectedDates.value.length} 晚\n总价格: ¥${totalPrice.value}`;
  
  if (orderNote.value.trim()) {
    content += `\n备注: ${orderNote.value.trim()}`;
  }

  uni.showModal({
    title: "确认预订",
    content: content,
    success: async (res) => {
      if (res.confirm) {
        try {
          const orderData = {
            homestayId: props.id,
            dates: selectedDates.value,
            totalPrice: totalPrice.value,
            note: orderNote.value.trim(),
          };

          const result = await sheep.$api.noAuth.addHomestayOrder(orderData);

          if (result) {
            const orderId = result;

            setTimeout(async () => {
              try {
                const payResult = await sheep.$api.noAuth.prepayHomestay(
                  orderId
                );

                if (payResult) {
                  const {
                    appId,
                    timeStamp,
                    nonceStr,
                    packageValue,
                    signType,
                    paySign,
                  } = payResult;

                  if (
                    timeStamp &&
                    nonceStr &&
                    packageValue &&
                    signType &&
                    paySign
                  ) {
                    uni.requestPayment({
                      provider: "wxpay",
                      timeStamp: timeStamp,
                      nonceStr: nonceStr,
                      package: packageValue,
                      signType: signType,
                      paySign: paySign,
                      success: (res) => {
                        uni.showToast({
                          title: "支付成功！",
                          icon: "success",
                          duration: 2000,
                        });
                        selectedDates.value = [];
                        totalPrice.value = 0;
                        orderNote.value = "";
                      },
                      fail: (err) => {
                        if (err.errMsg.includes("cancel")) {
                          uni.showToast({
                            title: "支付已取消",
                            icon: "none",
                            duration: 2000,
                          });
                        } else {
                          uni.showToast({
                            title: "支付失败，请重试",
                            icon: "none",
                            duration: 2000,
                          });
                        }
                      },
                    });
                  } else {
                    uni.showToast({
                      title: "支付参数不完整",
                      icon: "none",
                      duration: 2000,
                    });
                  }
                } else {
                  const errorMsg =
                    (payResult && payResult.msg) || "获取支付信息失败";
                  uni.showToast({
                    title: errorMsg,
                    icon: "none",
                    duration: 2000,
                  });
                }
              } catch (payError) {
                uni.showToast({
                  title: "调起支付失败，请重试",
                  icon: "none",
                  duration: 2000,
                });
              }
            }, 1000);
          } else {
            uni.showToast({
              title: "下单成功！",
              icon: "success",
              duration: 2000,
            });
            selectedDates.value = [];
            totalPrice.value = 0;
            orderNote.value = "";
          }
        } catch (error) {
          const errorMsg =
            error.message || error.toString() || "下单失败，请重试";
          uni.showToast({
            title: errorMsg,
            icon: "none",
            duration: 3000,
          });
        }
      }
    },
  });
};

onMounted(() => {
  loadDetail();
});
</script>

<style lang="scss" scoped>
$primary-color: #8b4513;
$secondary-color: #daa520;
$text-dark: #333;
$text-light: #666;
$success-color: #52c41a;
$error-color: #ff4d4f;

.detail-container {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 140rpx;
}

.loading-container,
.error-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;

  .loading-text,
  .error-text,
  .empty-text {
    font-size: 28rpx;
    color: $text-light;
    margin-bottom: 20rpx;
  }

  .retry-btn {
    padding: 16rpx 32rpx;
    background: $primary-color;
    color: white;
    border-radius: 24rpx;
    font-size: 26rpx;
  }
}

.detail-content {
  .hero-section {
    position: relative;
    width: 100%;
    height: 500rpx;

    .hero-image {
      width: 100%;
      height: 100%;
    }

    .hero-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
      display: flex;
      align-items: center;
      justify-content: center;

      .placeholder-emoji {
        font-size: 80rpx;
      }
    }

    .price-badge {
      position: absolute;
      top: 30rpx;
      right: 30rpx;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 20rpx;
      border-radius: 20rpx;
      text-align: center;

      .price-text {
        display: block;
        font-size: 28rpx;
        font-weight: bold;
      }

      .user-type {
        display: block;
        font-size: 20rpx;
        color: $secondary-color;
        margin-top: 3rpx;
        font-weight: 500;
      }

      .original-price {
        display: block;
        font-size: 18rpx;
        color: #ccc;
        margin-top: 3rpx;
        text-decoration: line-through;
      }
    }
  }

  .content-section {
    background: white;
    padding: 40rpx;

    .section-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: $text-dark;
      margin-bottom: 20rpx;
    }

    .title-section {
      margin-bottom: 30rpx;

      .title-header {
        .title-content {
          flex: 1;

          .main-title {
            display: block;
            font-size: 40rpx;
            font-weight: bold;
            color: $text-dark;
            margin-bottom: 10rpx;
          }

          .alias-name {
            display: block;
            font-size: 28rpx;
            color: $text-light;
            margin-bottom: 15rpx;
          }

          .address {
            font-size: 26rpx;
            color: $text-light;
          }
        }

        .follow-btn {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 16rpx 24rpx;
          border-radius: 40rpx;
          border: 2rpx solid #e0e0e0;
          background: white;
          transition: all 0.3s ease;
          margin-left: 20rpx;

          .follow-icon {
            font-size: 32rpx;
            margin-bottom: 4rpx;
          }

          .follow-text {
            font-size: 22rpx;
            color: $text-light;
          }

          &.followed {
            border-color: #ff4d4f;
            background: #fff2f2;

            .follow-text {
              color: #ff4d4f;
            }
          }

          &:active {
            transform: scale(0.95);
          }
        }
      }
    }

    .basic-info {
      margin-bottom: 30rpx;

      .info-row {
        display: flex;
        margin-bottom: 20rpx;

        .info-item {
          flex: 1;
          display: flex;

          .info-label {
            font-size: 26rpx;
            color: $text-light;
            width: 100rpx;
          }

          .info-value {
            font-size: 26rpx;
            color: $text-dark;
            font-weight: 500;

            &.status-active {
              color: $success-color;
            }
          }
        }
      }
    }

    .devices-section {
      margin-bottom: 30rpx;

      .devices-list {
        display: flex;
        flex-wrap: wrap;
        gap: 15rpx;

        .device-tag {
          padding: 10rpx 20rpx;
          background: #f0f7ff;
          color: $primary-color;
          border-radius: 15rpx;
          font-size: 24rpx;
        }
      }
    }

    .calendar-section {
      margin-bottom: 30rpx;

      .date-selection {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        background: #f8f9fa;
        border-radius: 16rpx;
        border: 2rpx solid #e0e0e0;
        transition: all 0.3s ease;

        &:active {
          background: #f0f0f0;
          transform: scale(0.98);
        }

        .date-display {
          flex: 1;

          .date-item {
            .date-label {
              display: block;
              font-size: 24rpx;
              color: $text-light;
              margin-bottom: 6rpx;
            }

            .date-value {
              font-size: 28rpx;
              color: $text-dark;
              font-weight: 500;
            }
          }
        }

        .date-arrow {
          font-size: 32rpx;
          color: $text-light;
          margin-left: 20rpx;
        }
      }

      .price-info {
        margin-top: 20rpx;

        .price-display {
          padding: 20rpx;
          background: #fff7e6;
          border-radius: 12rpx;
          border: 1rpx solid #ffd591;

          .price-text {
            font-size: 26rpx;
            color: $secondary-color;
            font-weight: bold;
          }
        }
      }
    }

    .note-section {
      margin-bottom: 30rpx;

      .note-input-wrapper {
        position: relative;
        border: 2rpx solid #e0e0e0;
        border-radius: 15rpx;
        background: white;
        overflow: hidden;

        .note-input {
          width: 100%;
          min-height: 120rpx;
          padding: 20rpx;
          border: none;
          font-size: 26rpx;
          line-height: 1.5;
          color: $text-dark;
          background: transparent;
          resize: none;

          &::placeholder {
            color: #ccc;
            font-size: 26rpx;
          }
        }

        .note-count {
          position: absolute;
          bottom: 10rpx;
          right: 15rpx;

          .count-text {
            font-size: 22rpx;
            color: $text-light;
          }
        }

        &:focus-within {
          border-color: $primary-color;
          box-shadow: 0 0 10rpx rgba(139, 69, 19, 0.1);
        }
      }
    }

    .contact-section {
      margin-bottom: 30rpx;

      .contact-item {
        display: flex;
        margin-bottom: 15rpx;

        .contact-label {
          font-size: 26rpx;
          color: $text-light;
          width: 120rpx;
        }

        .contact-value {
          font-size: 26rpx;
          color: $text-dark;

          &.phone {
            color: $primary-color;
            text-decoration: underline;
          }
        }
      }
    }

    .content-detail {
      .rich-content {
        font-size: 28rpx;
        line-height: 1.6;
        color: $text-dark;
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: white;
  padding: 20rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
  gap: 20rpx;
  z-index: 100;

  .action-btn {
    flex: 1;
    padding: 28rpx;
    border-radius: 30rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: bold;
    transition: all 0.3s ease;

    &.primary {
      background: linear-gradient(
        135deg,
        $primary-color 0%,
        $secondary-color 100%
      );
      color: white;
      box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.3);

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 6rpx rgba(139, 69, 19, 0.3);
      }
    }

    &.secondary {
      background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
      color: $text-dark;
      border: 2rpx solid #d0d0d0;

      &:active {
        background: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
        transform: translateY(2rpx);
      }
    }
  }
}

.calendar-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40rpx;

  .calendar-container {
    background: white;
    border-radius: 20rpx;
    overflow: hidden;
    width: 100%;
    max-width: 700rpx;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;

    .calendar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 40rpx;
      background: $primary-color;
      color: white;

      .calendar-title {
        font-size: 32rpx;
        font-weight: bold;
      }

      .close-btn {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: white;

        &:active {
          background: rgba(255, 255, 255, 0.3);
          transform: scale(0.95);
        }
      }
    }

    .calendar-content {
      flex: 1;
      overflow: auto;
      padding: 20rpx;

      .calendar-month-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 0;
        margin-bottom: 20rpx;

        .month-nav {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32rpx;
          color: $text-dark;
          font-weight: bold;

          &:active {
            background: #e8e8e8;
            transform: scale(0.95);
          }
        }

        .month-title {
          font-size: 32rpx;
          font-weight: bold;
          color: $text-dark;
        }
      }

      .calendar-weekdays {
        display: flex;
        margin-bottom: 20rpx;

        .weekday {
          flex: 1;
          text-align: center;
          font-size: 24rpx;
          color: $text-light;
          font-weight: bold;
          padding: 15rpx 0;
        }
      }

      .calendar-days {
        display: flex;
        flex-wrap: wrap;

        .calendar-day {
          width: calc(100% / 7);
          height: 120rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 12rpx;
          margin-bottom: 10rpx;
          position: relative;
          transition: all 0.2s ease;

          .day-text {
            font-size: 28rpx;
            font-weight: 500;
            margin-bottom: 4rpx;
          }

          .day-price {
            font-size: 18rpx;
            color: $secondary-color;
            font-weight: bold;
          }

          &.prev-month,
          &.next-month {
            .day-text {
              color: #ddd;
            }
          }

          &.current-month {
            .day-text {
              color: $text-dark;
            }

            &.today {
              

              .day-text {
                color: #40a9ff;
                font-weight: bold;
              }
            }

            

            &.selected {
              background: $primary-color;
              color: white;

              .day-text {
                color: white;
                font-weight: bold;
              }

              .day-price {
                color: #fff;
              }
            }

            &.booked {
              background: #f5f5f5;
              position: relative;

              .day-text {
                color: #ccc;
              }

              &::after {
                content: '×';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 40rpx;
                color: #ff4d4f;
                font-weight: bold;
              }
            }

            &.past {
              .day-text {
                color: #ccc;
              }

              .day-price {
                color: #ddd;
              }
            }
          }
        }
      }
    }

    .calendar-actions {
      display: flex;
      padding: 30rpx 40rpx;
      gap: 20rpx;
      border-top: 1rpx solid #eee;
      background: #fafafa;

      .action-btn {
        flex: 1;
        padding: 24rpx;
        border-radius: 12rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: bold;
        border: none;
        transition: all 0.3s ease;

        &.cancel {
          background: #f5f5f5;
          color: $text-dark;

          &:active {
            background: #e8e8e8;
            transform: scale(0.98);
          }
        }

        &.confirm {
          background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
          color: white;
          box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.3);

          &:active {
            transform: scale(0.98);
            box-shadow: 0 2rpx 6rpx rgba(139, 69, 19, 0.3);
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>